<template>
    <view class="artwork-detail-page">
        <!-- 自定义导航栏 -->
        <u-navbar title="作品详情" :bgColor="'#fff'" height="50" fixed placeholder :leftIconColor="'#333'"
            @leftClick="handleBack">
            <template #left>
                <u-icon name="arrow-left" color="#333" size="18"></u-icon>
            </template>
            <template #right>
                <u-icon name="share" color="#333" size="20" @click="shareArtwork"></u-icon>
            </template>
        </u-navbar>

        <view class="content">
            <!-- 作品标题和作者 -->
            <view class="artwork-header">
                <text class="artwork-title">{{ artworkDetail.title }}</text>
                <view class="artwork-artist-info">
                    <text class="artwork-artist">{{ artworkDetail.artist }}</text>
                    <text class="artwork-date">{{ artworkDetail.date }}</text>
                </view>
            </view>

            <!-- 作品图片 -->
            <view class="artwork-image-section">
                <up-swiper :list="artworkDetail.images" @change="e => currentNum = e.current" height="200" indicatorColor="#fff"
                    :autoplay="false" indicatorStyle="right: 20px" imgMode="aspectFit">
                    <template #indicator>
                        <view class="indicator-num">
                            <text class="indicator-num__text">{{ currentNum + 1 }}/{{ artworkDetail.images.length }}</text>
                        </view>
                    </template>
                </up-swiper>
            </view>

            <!-- 作品简介 -->
            <view class="artwork-description">
                <view class="section-title">
                    <u-icon name="file-text" color="#333" size="18"></u-icon>
                    <text>作品简介</text>
                </view>
                <text class="description-text">{{ artworkDetail.description }}</text>
            </view>

            <!-- 视频解说 -->
            <view class="video-section">
                <view class="section-title">
                    <u-icon name="play-circle" color="#333" size="18"></u-icon>
                    <text>视频解说</text>
                </view>

                <!-- 视频播放器 -->
                <view class="video-player-wrapper">
                    <video v-if="currentVideo.url" :key="currentVideoIndex" :src="currentVideo.url" :controls="true"
                        :autoplay="false" :show-fullscreen-btn="true" :show-play-btn="true" :show-center-play-btn="true"
                        :enable-progress-gesture="true" :vslide-gesture="true" :vslide-gesture-in-fullscreen="true"
                        :enable-play-gesture="true" :object-fit="'contain'"
                        :poster="currentVideo.thumbnail || defaultThumbnail" :direction="0" :initial-time="0"
                        class="video-player" @play="onVideoPlay" @pause="onVideoPause" @ended="onVideoEnded"
                        @error="onVideoError" @fullscreenchange="onFullscreenChange" @loadstart="onVideoLoad"
                        @loadeddata="onVideoLoaded" id="artworkVideoPlayer"></video>

                    <!-- 视频加载状态 -->
                    <view v-else-if="isVideoLoading" class="video-loading">
                        <view class="loading-spinner"></view>
                        <text class="loading-text">视频加载中...</text>
                    </view>

                    <!-- 视频占位符 -->
                    <view v-else class="video-placeholder">
                        <u-icon name="play-circle" color="#ccc" size="60"></u-icon>
                        <text class="placeholder-text">请选择要播放的视频</text>
                    </view>
                </view>

                <!-- 视频列表 -->
                <scroll-view scroll-x class="video-list-scroll">
                    <view class="video-list">
                        <view v-for="(video, index) in artworkDetail.videos" :key="index" class="video-item"
                            :class="{ active: currentVideoIndex === index }" @click="selectVideo(index)">
                            <image :src="video.thumbnail" class="video-thumb" mode="aspectFill"></image>
                            <view class="video-item-info">
                                <text class="video-item-title">{{ video.title }}</text>
                                <text class="video-item-duration">{{ video.duration || '00:00' }}</text>
                            </view>
                        </view>
                    </view>
                </scroll-view>

                <!-- 当前视频信息 -->
                <view class="current-video-info" v-if="currentVideo.title">
                    <text class="video-title">{{ currentVideo.title }}</text>
                    <text class="video-description">{{ currentVideo.description }}</text>
                </view>
            </view>

            <!-- 点赞和收藏 -->
            <!-- <view class="artwork-actions">
                <view class="action-item" @click="toggleLike">
                    <u-icon :name="isLiked ? 'heart-fill' : 'heart'" :color="isLiked ? '#ff6b6b' : '#999'"
                        size="20"></u-icon>
                    <text :class="['action-text', { liked: isLiked }]">{{
                        artworkDetail.likes
                    }}</text>
                </view>
                <view class="action-item" @click="toggleFavorite">
                    <u-icon :name="isFavorited ? 'bookmark-fill' : 'bookmark'" :color="isFavorited ? '#4ecdc4' : '#999'"
                        size="20"></u-icon>
                    <text :class="['action-text', { favorited: isFavorited }]">收藏</text>
                </view>
                <view class="action-item" @click="shareArtwork">
                    <u-icon name="share" color="#999" size="20"></u-icon>
                    <text class="action-text">分享</text>
                </view>
            </view> -->
        </view>

    </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 响应式数据
const artworkId = ref("");
const isLiked = ref(false);
const isFavorited = ref(false);
const isVideoLoading = ref(false); // 视频加载状态
const currentUserId = ref('user123'); // 当前用户ID，用于评论组件

const currentNum = ref(0);
// 添加当前视频索引和视频列表
const currentVideoIndex = ref(0);

// 作品详情数据 - 更新视频数据结构
const artworkDetail = reactive({
    id: 1,
    title: "兰亭序",
    artist: "王羲之",
    date: "东晋",
    type: "行书",
    images: [
        "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
        "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
        "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
        "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg"
    ],
    
    videoThumbnail: "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
    // 视频列表数据
    videos: [
        {
            title: "《兰亭序》书法技法详解",
            url: "https://shishuhuayin.com.cn/luoshenfu.mp4",
            thumbnail: "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
            duration: "05:30",
            description: "详细讲解王羲之《兰亭序》的笔法、结构和章法特点，帮助书法爱好者更好地理解和欣赏这件传世之作。"
        },
        {
            title: "《兰亭序》创作背景介绍",
            url: "https://shishuhuayin.com.cn/miaoyansiji.mp4",
            thumbnail: "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
            duration: "03:45",
            description: "介绍《兰亭序》的创作背景和历史价值，深入了解王羲之创作这件作品时的历史环境。"
        },
        {
            title: "《兰亭序》艺术价值分析",
            url: "https://shishuhuayin.com.cn/luoshenfu.mp4",
            thumbnail: "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
            duration: "07:15",
            description: "从艺术角度分析《兰亭序》的独特价值，探讨其在中国书法史上的重要地位。"
        }
    ],
    description: '《兰亭序》是东晋书法家王羲之的代表作，被誉为"天下第一行书"。作品记述了王羲之与友人在会稽山阴兰亭聚会的盛况，抒发了对人生无常的感慨。全文共324字，章法自然，笔法多变，是书法艺术的巅峰之作。'
});

// 计算当前视频
const currentVideo = computed(() => {
    return artworkDetail.videos[currentVideoIndex.value] || {};
});

// 页面加载时获取参数
onLoad((options) => {
    if (options.id) {
        artworkId.value = options.id;
        loadArtworkDetail(options.id);
    }

    // 延迟测试视频播放功能
    setTimeout(() => {
        console.log("页面加载完成，视频播放器已准备");
    }, 1000);
});

// 返回上一页
const handleBack = () => {
    const pages = getCurrentPages();
    if (pages.length > 1) {
        uni.navigateBack();
    } else {
        uni.switchTab({
            url: "/pages/index/index",
        });
    }
};

// 加载作品详情
const loadArtworkDetail = (id) => {
    // 模拟从服务器获取作品详情
    console.log("加载作品详情:", id);
    // 这里可以调用API获取实际数据
};

// 分享作品
const shareArtwork = () => {
    uni.showActionSheet({
        itemList: ["分享到微信", "分享到朋友圈", "复制链接"],
        success: (res) => {
            const actions = ["微信好友", "朋友圈", "复制链接"];
            uni.showToast({
                title: `分享到${actions[res.tapIndex]}`,
                icon: "success",
            });
        },
    });
};

// 点赞作品
const toggleLike = () => {
    isLiked.value = !isLiked.value;
    if (isLiked.value) {
        artworkDetail.likes++;
        uni.showToast({
            title: "点赞成功",
            icon: "success",
        });
    } else {
        artworkDetail.likes--;
    }
};

// 收藏作品
const toggleFavorite = () => {
    isFavorited.value = !isFavorited.value;
    uni.showToast({
        title: isFavorited.value ? "已收藏" : "已取消收藏",
        icon: isFavorited.value ? "success" : "none",
    });
};


// 视频播放事件
const onVideoPlay = () => {
    console.log("视频开始播放");
    isVideoLoading.value = false;
    // uni.showToast({
    //     title: "开始播放",
    //     icon: "none",
    // });
};

// 视频暂停事件
const onVideoPause = () => {
    console.log("视频暂停");
};

// 视频播放结束事件
const onVideoEnded = () => {
    console.log("视频播放结束");
    // uni.showToast({
    //     title: "视频播放结束",
    //     icon: "none",
    // });
};

// 视频播放错误事件
const onVideoError = (e) => {
    console.error("视频播放错误:", e);
    isVideoLoading.value = false;
    uni.showToast({
        title: "视频播放出错，请检查网络",
        icon: "none",
    });
};

// 视频全屏状态改变事件
const onFullscreenChange = (e) => {
    console.log("视频全屏状态改变:", e);
    if (e.detail.fullScreen) {
        console.log("进入全屏");
    } else {
        console.log("退出全屏");
    }
};

// 视频加载事件
const onVideoLoad = () => {
    console.log("视频加载中");
    // isVideoLoading.value = true;
};

// 视频加载完成事件
const onVideoLoaded = () => {
    console.log("视频加载完成");
    isVideoLoading.value = false;
};

// 选择视频
const selectVideo = (index) => {
    currentVideoIndex.value = index;
};

</script>

<style lang="scss" scoped>
.artwork-detail-page {
    min-height: 100vh;
    background: #f5f6fa;
    position: relative;
}

.content {
    padding: 20rpx 30rpx;
}

.artwork-header {
    margin-bottom: 30rpx;

    .artwork-title {
        display: block;
        font-size: 40rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 16rpx;
    }

    .artwork-artist-info {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .artwork-artist {
            font-size: 30rpx;
            color: #666;
            font-weight: 500;
        }

        .artwork-date {
            font-size: 26rpx;
            color: #999;
        }
    }
}

.artwork-image-section {
    margin-bottom: 20px;
    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
            color: #FFFFFF;
            font-size: 12px;
        }
    }
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 24rpx;

    text {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
    }
}

.artwork-description {
    margin-bottom: 40rpx;

    .description-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
    }
}

.video-section {
    margin-bottom: 40rpx;

    .video-player-wrapper {
        width: 100%;
        height: 400rpx;
        border-radius: 20rpx;
        overflow: hidden;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        background: #000;
        margin-bottom: 20rpx;
        position: relative;

        .video-player {
            width: 100%;
            height: 100%;
        }

        .video-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            background: #f5f5f5;

            .loading-spinner {
                width: 40rpx;
                height: 40rpx;
                border: 4rpx solid #ccc;
                border-top-color: #333;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

            .loading-text {
                font-size: 28rpx;
                color: #999;
                margin-top: 20rpx;
            }
        }

        .video-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            background: #f5f5f5;

            .placeholder-text {
                font-size: 28rpx;
                color: #999;
                margin-top: 20rpx;
            }
        }
    }

    .video-list-scroll {
        width: 100%;
        white-space: nowrap;
        margin-bottom: 20rpx;

        .video-list {
            display: inline-flex;

            .video-item {
                width: 280rpx;
                margin-right: 20rpx;
                border-radius: 15rpx;
                overflow: hidden;
                box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
                background: #fff;
                transition: all 0.3s ease;

                &.active {
                    transform: translateY(-10rpx);
                    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
                    border: 2rpx solid #4ecdc4;
                }

                .video-thumb {
                    width: 100%;
                    height: 160rpx;
                }

                .video-item-info {
                    padding: 15rpx;

                    .video-item-title {
                        font-size: 26rpx;
                        color: #333;
                        display: block;
                        margin-bottom: 10rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .video-item-duration {
                        font-size: 22rpx;
                        color: #999;
                    }
                }
            }
        }
    }

    .current-video-info {
        .video-title {
            display: block;
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 12rpx;
        }

        .video-description {
            display: block;
            font-size: 26rpx;
            color: #666;
            line-height: 1.5;
        }
    }
}

.artwork-actions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

    .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12rpx;

        .action-text {
            font-size: 24rpx;
            color: #999;

            &.liked,
            &.favorited {
                color: #333;
            }
        }
    }
}
</style>
